<script setup lang="ts">
    import { Memo } from "@element-plus/icons-vue" //导入图标
</script>

<template>
    <section class="total">
        <div>6月统计信息</div>
        <div>
            <div>
                <div class="bg1"><el-icon class="icon"> <Memo /> </el-icon></div>
                <div>
                    <div>500</div>
                    <div>商品数量（个）</div>
                </div>
            </div>
            <div>
                <div class="bg2"><el-icon class="icon"> <Memo /> </el-icon></div>
                <div>
                    <div>20</div>
                    <div>商品分类数量（个）</div>
                </div>
            </div>
            <div>
                <div class="bg3"><el-icon class="icon"> <Memo /> </el-icon></div>
                <div>
                    <div>121</div>
                    <div>用户访问次数（次）</div>
                </div>
            </div>
        </div>
    </section>
</template>

<style scoped>
    .total{
        border:1px solid #E4E7ED;
        border-radius: 5px;
        width:75%;
        box-shadow: 0px 0px 5px 5px #E4E7ED;
        margin:20px 20px 20px 0px;
    }
    .total > div:first-child{
        padding-left:20px;
        line-height:50px;
        border-bottom:1px solid #E4E7ED;
    }
    .total > div:last-child{
        display:flex;
        justify-content: space-between;
        align-items: center;
        flex-grow: 1;
    }
    .total > div:last-child > div{
        border:1px solid #E4E7ED;
        display:flex;
        justify-content: space-between;
        flex-grow: 1;
        margin:20px;
    }
    .total > div:last-child > div > div:last-child{
        display:flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .total > div:last-child > div > div:last-child > div:first-child{
        font-size:17px;
        font-weight: bold;
        margin:0px 0px 20px 0px;
    }
    .total .icon{
        font-size:90px;
        color:#FFFFFF;
    }
    .total .bg1{
        background-color:#EEAD0E;
    }
    .total .bg2{
        background-color:#AB82FF;
    }
    .total .bg3{
        background-color:#63B8FF;
    }
</style>
